<template>
  <view class="card-list" v-for="item in dataList" :key="item.contractId">
    <view class="card-list-header">
      <wd-cell :title="item.title" title-width="175px" custom-class="card-list-cell">
        <view class="flex flex-between">
          <view class="font20">{{ item.submitTime }}</view>
          <wd-tag custom-class="space" type="primary" :color="colorList[item.status]"
                  :bg-color="bgColorList[item.status]">
            {{ tagNameList[item.status] }}
          </wd-tag>
        </view>
      </wd-cell>
    </view>
    <wd-cell title="合同编号" :value="item.contractNo"/>
    <wd-cell title="合同总金额" :value="item.totalAmount"/>
    <view class="card-list-container" v-if="item.status===3">
      <view class="amount-content">
        <view class="amount">￥{{ item.currentPayableAmount }}</view>
        <view>当前应付款</view>
      </view>
      <view class="amount-content">
        <view class="amount">￥{{ item.paidAmount }}</view>
        <view>已付款</view>
      </view>
    </view>
    <view class="card-list-footer">
      <div v-for="(button, i) in getVisibleButtons(item)" :key="button.text" style="display: flex"
           @click="button.action">
        <div>{{ button.text }}</div>
        <div
            class="divider-grey"
            :style="{ margin: getVisibleButtons(item).length > 2 ? '0 60rpx' : '0 100rpx' }"
            v-if="i < getVisibleButtons(item).length - 1"
        ></div>
      </div>
    </view>
  </view>
  <wd-status-tip tip="这里暂时什么都没有哦" v-if="dataList.length<=0"
                 image="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/empty.png"/>
</template>

<script setup>
import {ref} from "vue"
import {listContract, signContract} from "@/api/contract";

const colorList = ref(["#FF9900", "#409EFF", "#409EFF", "#409EFF", "#909399"])
const bgColorList = ref(["#FFF0D9", "#D9EDFF", "#D9EDFF", "#D9EDFF", "#f4f4f5"])
const tagNameList = ref(["待生成", "审批中", "待签约", "已签约", "已作废"])
const dataList = ref(0)
const signUrl = ref(null)
const buttons = row => {
  return [
    {
      condition: () => row.status !== 4,
      text: "查看合同",
      action: () => uni.navigateTo({url: "/pages/contractManage/contractDetails/index?contractId=" + row.contractId})
    },
    {
      condition: () => row.signingMethod === 2 && row.status === 2,
      text: "签约",
      action: () => handleDelete(row)
    },
    // {
    //   condition: () => true,
    //   text: "查看付款计划",
    //   action: () => uni.navigateTo({url: "/pages/contractManage/paymentPlan/index"})
    // },
  ];
};
//定义按钮
const getVisibleButtons = row => {
  // 过滤可见按钮
  return buttons(row).filter(btn => btn.condition());
};
const handleDelete = async (row) => {
  signUrl.value = null
  const {data} = await signContract(row.contractNo)
  signUrl.value = data.signUrl
  if (signUrl.value) {
    // 跳转
    let url = "https://smlt.esign.cn/isoMA6o"
    uni.navigateTo({url: "/pages/linkPage/linkPage?value=" + url})
  }
}
const getList = async () => {
  const {data} = await listContract()
  dataList.value = data || []
}
getList()
</script>

<style lang="scss" scoped>
.card-list {
  background: #FFFFFF;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  overflow: hidden;
  margin-bottom: 20rpx;

  &-header {
    border-bottom: 2rpx solid #F5F7FA;
    padding-bottom: 24rpx;
  }

  &-container {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20rpx;

    .amount-content {
      width: 300rpx;
      height: 128rpx;
      background: #F6F8FA;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #86909C;

      .amount {
        color: #3D3D3D;
        margin-bottom: 10rpx;
      }
    }
  }

  &-footer {
    border-top: 2rpx solid #F5F7FA;
    padding: 24rpx;
    color: #007DFF;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-content: center;

    .divider-grey {
      width: 4rpx;
      height: 40rpx;
      background: #E1E6ED;
    }
  }
}
</style>